<template>
  <view class="favorite-item">
    <view class="favorite-item__content" @click="$emit('detail', item.recruitId)">
      <image class="favorite-item__logo" :src="item.recruitInfo?.logo || defaultLogo" mode="aspectFill"></image>
      <view class="favorite-item__info">
        <view class="favorite-item__name">{{ item.recruitInfo?.title || '未知岗位' }}</view>
        <view class="favorite-item__org">{{ item.recruitInfo?.organization || '未知组织' }}</view>
        <view class="favorite-item__tags">
          <text class="favorite-item__tag favorite-item__tag--type">{{ getTypeName(item.recruitInfo?.type) }}</text>
          <text v-if="item.recruitInfo?.isHot" class="favorite-item__tag favorite-item__tag--hot">热门</text>
        </view>
      </view>
    </view>
    
    <view class="favorite-item__action">
      <button 
        class="favorite-item__btn favorite-item__btn--cancel" 
        @click="$emit('cancel', item.recruitId)"
      >
        <text>✕</text>
      </button>
      <button 
        class="favorite-item__btn favorite-item__btn--apply" 
        @click="$emit('apply', item.recruitId)"
      >
        申请
      </button>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

defineEmits(['detail', 'cancel', 'apply']);

const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  defaultLogo: {
    type: String,
    default: 'https://placekitten.com/200/200'
  }
});

// 获取岗位类型名称
const getTypeName = (type) => {
  const typeMap = {
    1: '社团招新',
    2: '活动招募',
    3: '志愿者岗位'
  };
  return typeMap[type] || '其他岗位';
};
</script>

<style lang="scss" scoped>
.favorite-item {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  
  &__content {
    display: flex;
    margin-bottom: 16px;
  }
  
  &__logo {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    margin-right: 12px;
    background-color: #f5f5f5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  
  &__info {
    flex: 1;
  }
  
  &__name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.4;
  }
  
  &__org {
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
  }
  
  &__tags {
    display: flex;
    flex-wrap: wrap;
  }
  
  &__tag {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 10px;
    margin-right: 8px;
    margin-bottom: 4px;
    font-weight: 500;
    
    &--type {
      background-color: #e6f7ff;
      color: #1890ff;
    }
    
    &--hot {
      background-color: #fff2e8;
      color: #fa541c;
    }
  }
  
  &__action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px dashed #f0f0f0;
    padding-top: 12px;
  }
  
  &__btn {
    height: 36px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    
    &--cancel {
      width: 36px;
      background-color: #f5f5f5;
      color: #999;
      margin-right: 12px;
      
      &:active {
        background-color: #f0f0f0;
        transform: scale(0.95);
      }
    }
    
    &--apply {
      background: linear-gradient(90deg, #1890ff, #36a6ff);
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
      padding: 0 20px;
      
      &:active {
        background: linear-gradient(90deg, #0c80f0, #1890ff);
        transform: scale(0.97);
      }
    }
  }
}
</style>
